import React from "react";
import axios from "axios";
import {Button, Checkbox, Form, Input} from "antd";
import * as PropTypes from "prop-types";
import {Link} from "react-router-dom";

function UserOutlined(props) {
    return null;
}

UserOutlined.propTypes = {className: PropTypes.string};

function LockOutlined(props) {
    return null;
}

LockOutlined.propTypes = {className: PropTypes.string};
export default class UserLogin extends React.Component{
    constructor(props) {
        super(props);
        this.state = ({
            user:{}
        })
    }

    getInput = () => {
        const userName = document.getElementById('userName').value;
        const userPassword = document.getElementById('userPassword').value;
        const user ={};
        user.userName = userName;
        user.userPassword = userPassword;
        this.setState({
            user: user
        })
    }

    userLogin = (e) => {
        e.preventDefault()
        // console.log(this.state.user)
        const url = 'http://localhost:8080/user/userLogin'
        axios.post(url, this.state.user).then(
            (user) => {
                if (user.data) {
                    this.setState({
                        user: user.data
                    })
                    this.props.history.push({pathname:"/BookList",state:{user:user.data}});
                }else{
                    alert("账号或密码错误！")
                }
            }
        );

    }

    render() {
        return (
            <div className="UserLogin">
                <div className="LoginBody">
                    <h1>用户登录</h1>

                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}

                    >
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your Username!',
                                },
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon"/>}
                                   placeholder="用户名"
                                   id="userName"
                                   onChange={this.getInput}
                            />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your Password!',
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon"/>}
                                type="password"
                                placeholder="密码"
                                id="userPassword"
                                onChange={this.getInput}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住我</Checkbox>
                            </Form.Item>

                            <a className="login-form-forgot" href="">
                                忘记密码
                            </a>
                        </Form.Item>

                        <Form.Item>
                            <Button
                                type="primary"
                                htmlType="submit"
                                className="login-form-button"
                                onClick={this.userLogin}
                            >
                                登录
                            </Button>
                            没有账号？
                            <Link to="/UserRegister">现在注册</Link>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
}